<script setup>
import { ref, computed } from 'vue'

// 定义标签分类
defineProps({
  section: {
    type: String,
    default: 'all'
  }
})

// 标签数据
const tagCategories = [
  { id: 'structure', name: '结构标签', tags: ['html', 'head', 'body', 'title', 'meta', 'link', 'script', 'style'] },
  { id: 'text', name: '文本标签', tags: ['h1-h6', 'p', 'a', 'br', 'hr', 'strong', 'em', 'u', 's', 'span', 'div'] },
  { id: 'list', name: '列表标签', tags: ['ul', 'ol', 'li', 'dl', 'dt', 'dd'] },
  { id: 'table', name: '表格标签', tags: ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption', 'colgroup', 'col'] },
  { id: 'form', name: '表单标签', tags: ['form', 'input', 'button', 'select', 'option', 'textarea', 'label', 'fieldset', 'legend'] },
  { id: 'media', name: '媒体标签', tags: ['img', 'audio', 'video', 'source', 'track', 'canvas', 'svg'] },
  { id: 'semantic', name: '语义标签', tags: ['header', 'nav', 'main', 'article', 'section', 'aside', 'footer', 'figure', 'figcaption'] }
]

// CSS样式分类
const cssCategories = [
  { id: 'layout', name: '布局样式', properties: ['display', 'position', 'float', 'clear', 'overflow', 'width', 'height', 'margin', 'padding', 'border'] },
  { id: 'typography', name: '排版样式', properties: ['font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'color', 'text-align', 'text-decoration', 'text-transform'] },
  { id: 'background', name: '背景样式', properties: ['background-color', 'background-image', 'background-repeat', 'background-position', 'background-size', 'background-attachment'] },
  { id: 'box', name: '盒模型样式', properties: ['box-sizing', 'border-style', 'border-width', 'border-color', 'border-radius', 'box-shadow', 'outline'] },
  { id: 'animation', name: '动画样式', properties: ['transition', 'animation', 'transform', 'opacity'] },
  { id: 'interaction', name: '交互样式', properties: ['cursor', 'user-select', 'pointer-events', 'hover', 'focus', 'active'] }
]

// 选中的分类
const selectedCategory = ref('structure')
const activeTab = ref('tags')

// 当前分类的标签
const currentTags = computed(() => {
  const category = tagCategories.find(cat => cat.id === selectedCategory.value)
  return category ? category.tags : []
})

// 当前分类的CSS属性
const currentCssProps = computed(() => {
  const category = cssCategories.find(cat => cat.id === selectedCategory.value)
  return category ? category.properties : []
})

// 标签详情
const tagDetails = {
  'html': {
    description: 'HTML文档的根元素',
    example: '<html lang="zh-CN">\n  <head>...</head>\n  <body>...</body>\n</html>'
  },
  'head': {
    description: '包含文档的元数据',
    example: '<head>\n  <title>页面标题</title>\n  <meta charset="UTF-8">\n  <link rel="stylesheet" href="style.css">\n</head>'
  },
  'body': {
    description: '包含文档的可见内容',
    example: '<body>\n  <h1>页面标题</h1>\n  <p>页面内容</p>\n</body>'
  },
  'h1-h6': {
    description: '标题元素，从h1到h6表示不同级别的标题',
    example: '<h1>一级标题</h1>\n<h2>二级标题</h2>\n<h3>三级标题</h3>'
  },
  'p': {
    description: '段落元素',
    example: '<p>这是一个段落文本。</p>'
  },
  'a': {
    description: '链接元素',
    example: '<a href="https://www.example.com" target="_blank">访问示例网站</a>'
  },
  'img': {
    description: '图像元素',
    example: '<img src="image.jpg" alt="描述图片" width="300" height="200">'
  },
  'div': {
    description: '通用容器元素',
    example: '<div class="container">\n  内容放在这里\n</div>'
  },
  'span': {
    description: '行内通用容器元素',
    example: '<p>这是<span class="highlight">高亮</span>文本。</p>'
  },
  'ul': {
    description: '无序列表',
    example: '<ul>\n  <li>项目1</li>\n  <li>项目2</li>\n</ul>'
  },
  'ol': {
    description: '有序列表',
    example: '<ol>\n  <li>第一步</li>\n  <li>第二步</li>\n</ol>'
  },
  'li': {
    description: '列表项',
    example: '<li>列表中的一项</li>'
  },
  'table': {
    description: '表格元素',
    example: '<table>\n  <tr>\n    <th>表头1</th>\n    <th>表头2</th>\n  </tr>\n  <tr>\n    <td>数据1</td>\n    <td>数据2</td>\n  </tr>\n</table>'
  },
  'form': {
    description: '表单元素',
    example: '<form action="submit.php" method="POST">\n  <!-- 表单控件 -->\n</form>'
  },
  'input': {
    description: '输入控件',
    example: '<input type="text" name="username" placeholder="请输入用户名">\n<input type="password" name="password" placeholder="请输入密码">\n<input type="submit" value="提交">'
  },
  'button': {
    description: '按钮元素',
    example: '<button type="button">点击我</button>'
  },
  'textarea': {
    description: '多行文本输入控件',
    example: '<textarea rows="4" cols="50" placeholder="请输入描述"></textarea>'
  },
  'select': {
    description: '下拉选择框',
    example: '<select name="color">\n  <option value="red">红色</option>\n  <option value="green">绿色</option>\n  <option value="blue">蓝色</option>\n</select>'
  },
  'header': {
    description: '页面头部',
    example: '<header>\n  <h1>网站标题</h1>\n  <nav>导航链接</nav>\n</header>'
  },
  'nav': {
    description: '导航区域',
    example: '<nav>\n  <ul>\n    <li><a href="#home">首页</a></li>\n    <li><a href="#about">关于我们</a></li>\n  </ul>\n</nav>'
  },
  'main': {
    description: '主要内容区域',
    example: '<main>\n  <!-- 页面主要内容 -->\n</main>'
  },
  'footer': {
    description: '页面底部',
    example: '<footer>\n  <p>&copy; 2023 版权所有</p>\n</footer>'
  }
}

// CSS属性详情
const cssPropertyDetails = {
  'display': {
    description: '指定元素的显示类型',
    values: 'block, inline, inline-block, flex, grid, none...',
    example: 'div { display: flex; }'
  },
  'position': {
    description: '指定元素的定位类型',
    values: 'static, relative, absolute, fixed, sticky',
    example: 'div { position: absolute; top: 10px; left: 10px; }'
  },
  'color': {
    description: '设置文本颜色',
    values: '颜色名称, 十六进制值, RGB, RGBA, HSL, HSLA',
    example: 'p { color: #333; }\nh1 { color: rgba(255, 0, 0, 0.8); }'
  },
  'background-color': {
    description: '设置元素的背景颜色',
    values: '颜色名称, 十六进制值, RGB, RGBA, HSL, HSLA',
    example: 'div { background-color: lightblue; }'
  },
  'font-size': {
    description: '设置字体大小',
    values: 'px, em, rem, %, vh, vw...',
    example: 'p { font-size: 16px; }\nh1 { font-size: 2rem; }'
  },
  'margin': {
    description: '设置元素的外边距',
    values: 'length, auto',
    example: 'div { margin: 10px; }\n.element { margin: 10px 20px; }'
  },
  'padding': {
    description: '设置元素的内边距',
    values: 'length',
    example: 'div { padding: 10px; }\n.box { padding: 10px 20px; }'
  },
  'border': {
    description: '设置元素的边框',
    values: 'width style color',
    example: 'div { border: 1px solid #ccc; }\n.button { border: 2px dashed red; }'
  },
  'width': {
    description: '设置元素的宽度',
    values: 'length, %, auto',
    example: 'div { width: 300px; }\n.container { width: 100%; }'
  },
  'height': {
    description: '设置元素的高度',
    values: 'length, %, auto',
    example: 'div { height: 200px; }\n.full-height { height: 100%; }'
  },
  'text-align': {
    description: '设置文本的水平对齐方式',
    values: 'left, right, center, justify',
    example: 'p { text-align: justify; }\nh1 { text-align: center; }'
  },
  'font-family': {
    description: '设置文本的字体系列',
    values: '字体名称, 通用字体族',
    example: 'body { font-family: "Microsoft YaHei", Arial, sans-serif; }'
  },
  'border-radius': {
    description: '设置元素的圆角',
    values: 'length, %',
    example: 'div { border-radius: 5px; }\n.button { border-radius: 20px; }\n.circle { border-radius: 50%; }'
  },
  'box-shadow': {
    description: '设置元素的阴影效果',
    values: 'h-offset v-offset blur spread color inset',
    example: 'div { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }'
  },
  'transition': {
    description: '设置元素的过渡效果',
    values: 'property duration timing-function delay',
    example: 'button { transition: background-color 0.3s ease; }'
  },
  'transform': {
    description: '设置元素的变形效果',
    values: 'translate(), rotate(), scale(), skew()...',
    example: 'div { transform: rotate(45deg); }\nbutton:hover { transform: scale(1.1); }'
  },
  'flex': {
    description: '设置flex容器的子元素的flex属性',
    values: 'grow shrink basis',
    example: 'item { flex: 1; }\n.sidebar { flex: 0 0 250px; }'
  },
  'grid': {
    description: '设置grid容器',
    values: 'grid-template-columns, grid-template-rows, gap...',
    example: 'container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }'
  }
}

// 选中的标签或属性
const selectedItem = ref('html')

// 获取选中项的详情
const getSelectedDetails = () => {
  if (activeTab.value === 'tags') {
    return tagDetails[selectedItem.value] || { description: '暂无详细信息', example: '' }
  } else {
    return cssPropertyDetails[selectedItem.value] || { description: '暂无详细信息', values: '', example: '' }
  }
}
</script>

<template>
  <div class="html-tutorial">
    <div class="top-text">You do it</div>
    <h1>HTML & CSS 教程</h1>
    
    <!-- 标签与样式切换 -->
    <div class="tab-container">
      <button 
        :class="['tab-button', { active: activeTab === 'tags' }]" 
        @click="activeTab = 'tags'"
      >
        HTML 标签
      </button>
      <button 
        :class="['tab-button', { active: activeTab === 'css' }]" 
        @click="activeTab = 'css'"
      >
        CSS 样式
      </button>
    </div>

    <!-- 分类选择器 -->
    <div class="category-selector">
      <h2>{{ activeTab === 'tags' ? 'HTML 标签分类' : 'CSS 样式分类' }}</h2>
      <div class="categories">
        <div 
          v-for="category in (activeTab === 'tags' ? tagCategories : cssCategories)" 
          :key="category.id"
          :class="['category-item', { active: selectedCategory === category.id }]"
          @click="selectedCategory = category.id; selectedItem = (activeTab === 'tags' ? category.tags[0] : category.properties[0]) || ''"
        >
          {{ category.name }}
        </div>
      </div>
    </div>

    <!-- 内容展示区域 -->
    <div class="content-area">
      <!-- 左侧标签/属性列表 -->
      <div class="items-list">
        <h2>{{ activeTab === 'tags' ? 'HTML 标签' : 'CSS 属性' }}</h2>
        <div class="items">
          <div 
            v-for="item in (activeTab === 'tags' ? currentTags : currentCssProps)" 
            :key="item"
            :class="['item', { active: selectedItem === item }]"
            @click="selectedItem = item"
          >
            {{ activeTab === 'tags' ? `<${item}>` : item }}
          </div>
        </div>
      </div>

      <!-- 右侧详情展示 -->
      <div class="details">
        <h2>{{ activeTab === 'tags' ? `<${selectedItem}>` : selectedItem }}</h2>
        <div class="detail-content">
          <div class="description">
            <h3>描述</h3>
            <p>{{ getSelectedDetails().description }}</p>
          </div>
          
          <div v-if="activeTab === 'css' && getSelectedDetails().values" class="values">
            <h3>常用值</h3>
            <p>{{ getSelectedDetails().values }}</p>
          </div>
          
          <div class="example">
            <h3>代码示例</h3>
            <pre><code>{{ getSelectedDetails().example }}</code></pre>
          </div>
        </div>
      </div>
    </div>

    <!-- 静态资源使用示例 -->
    <div class="resources-section">
      <h2>静态资源使用示例</h2>
      
      <div class="resource-demo">
        <h3>图片资源示例</h3>
        <div class="demo-content">
          <img src="@/assets/ziyuan/tupian.jpg" alt="示例图片" class="demo-image">
          <pre><code>&lt;img src="@/assets/ziyuan/tupian.jpg" alt="示例图片"&gt;</code></pre>
        </div>
      </div>
      
      <div class="resource-demo">
        <h3>音频资源示例</h3>
        <div class="demo-content">
           <audio controls class="demo-audio">
             <source src="@/assets/ziyuan/huanghe.mp3" type="audio/mpeg">
             您的浏览器不支持音频播放。
           </audio>
            <pre><code>&lt;audio controls&gt;
    &lt;source src="@/assets/ziyuan/huanghe.mp3" type="audio/mpeg"&gt;
    您的浏览器不支持音频播放。
&lt;/audio&gt;</code></pre>
        </div>
      </div>
      
      <div class="resource-demo">
        <h3>视频资源示例</h3>
        <div class="demo-content">
          <video controls class="demo-video">
            <source src="@/assets/ziyuan/baowei.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
          </video>
          <pre><code>&lt;video controls&gt;
  &lt;source src="@/assets/ziyuan/baowei.mp4" type="video/mp4"&gt;
  您的浏览器不支持视频播放。
&lt;/video&gt;</code></pre>
        </div>
      </div>
    </div>

    <!-- 实战演示区域 -->
    <div class="demo-section">
      <h2>实战演示</h2>
      <div class="demo-container">
        <div class="demo-item">
          <h3>基础HTML结构</h3>
          <pre><code>{{ `<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个HTML页面</title>
    <style>
      body {
        font-family: "Microsoft YaHei", Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      h1 {
        color: #2c3e50;
        text-align: center;
      }
      .highlight {
        background-color: #f0f8ff;
        padding: 10px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>欢迎来到HTML世界</h1>
    </header>
    <main>
      <section class="highlight">
        <h2>HTML是什么？</h2>
        <p>HTML是超文本标记语言，是构建网页的基础。</p>
      </section>
      <section>
        <h2>学习HTML的好处</h2>
        <ul>
          <li>创建自己的网站</li>
          <li>理解网页的工作原理</li>
          <li>为学习CSS和JavaScript打下基础</li>
        </ul>
      </section>
    </main>
    <footer>
      <p>&copy; 2023 HTML学习笔记</p>
    </footer>
  </body>
</html>` }}</code></pre>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.html-tutorial {
  width: 100%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}

.html-tutorial h1 {
  text-align: center;
  color: var(--color-heading);
  margin-bottom: 30px;
}

.html-tutorial h2 {
  color: var(--color-heading);
  margin-top: 20px;
  margin-bottom: 15px;
}

.html-tutorial h3 {
  color: var(--color-heading);
  margin-top: 15px;
  margin-bottom: 10px;
  font-weight: 600;
}

.tab-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.tab-button {
  padding: 10px 20px;
  margin: 0 10px;
  border: 2px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.tab-button:hover {
  background-color: var(--color-background-soft);
  border-color: var(--color-border-hover);
}

.tab-button.active {
  background-color: hsla(160, 100%, 37%, 1);
  color: white;
  border-color: hsla(160, 100%, 37%, 1);
}

.category-selector {
  margin-bottom: 30px;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-item {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-item:hover {
  background-color: var(--color-background-soft);
  border-color: var(--color-border-hover);
}

.category-item.active {
  background-color: hsla(160, 100%, 37%, 0.2);
  border-color: hsla(160, 100%, 37%, 1);
  color: hsla(160, 100%, 37%, 1);
}

.content-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.top-text {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.items-list {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 15px;
  height: fit-content;
  max-height: 500px;
  overflow-y: auto;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.item:hover {
  background-color: var(--color-background-soft);
}

.item.active {
  background-color: hsla(160, 100%, 37%, 0.2);
  color: hsla(160, 100%, 37%, 1);
  font-weight: 500;
}

.details {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 20px;
}

.detail-content {
  margin-top: 20px;
}

.description, .values, .example {
  margin-bottom: 20px;
}

pre {
  background-color: var(--color-background-soft);
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.demo-section {
  margin-top: 40px;
}

.demo-container {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 20px;
}

.demo-item {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .content-area {
    grid-template-columns: 1fr;
  }
  
  .items-list {
    max-height: 200px;
  }
  
  .categories {
    justify-content: center;
  }
}

/* 静态资源示例样式 */
.resources-section {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}

.resource-demo {
  margin-bottom: 30px;
  padding: 15px;
  background-color: var(--color-background-soft);
  border-radius: 5px;
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.demo-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.demo-audio, .demo-video {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .demo-content {
    flex-direction: row;
    align-items: center;
  }
  
  .demo-image, .demo-audio, .demo-video {
    flex: 1;
  }
  
  pre {
    flex: 1;
  }
}
</style>